import { Button, Card, Form, Input, Space, Table, Tooltip } from "antd";
import { useCallback } from "react";
import { useEffect } from "react";
import { useState } from "react";
import { GET_SCRIPTS } from "../../api/scripts";

function ScriptsList() {

  let [scripts, setScripts] = useState([]);

  let [loading, setLoading] = useState(false);


  let [total, setTotal] = useState(0)
  let [params, setParams] = useState({
    page: 1,
    limit: 10,
    title: "",
  })
  // 获取数据
  let getData = useCallback(async () => {
    setLoading(true);
    // console.log("获取数据", params);
    let res = await GET_SCRIPTS(params);
    console.log(res);
    setLoading(false);
    setScripts(res.data.scripts);
    setTotal(res.data.total);
  }, [params])



  let remove = (script) => {
    // console.log(script);
  }

  // 设置列数据
  let columns = [
    {
      title: "图片",
      dataIndex: "url",
      key: "url",
      render: (url) => {
        return (<img src={url} style={{ width: 50, height: 80 }} alt="" />)
      }
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title"
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
      // ellipsis: true,  // 超过宽度自动隐藏
      render: (content) => {
        // return (<span>{content ? content.slice(0, 30) + "..." : ""}</span>)
        return (
          <Tooltip title={content} overlayInnerStyle={{ width: 350 }} color="green">
            <span>{content ? content.slice(0, 30) + "..." : ""}</span>
          </Tooltip>
        )
      }
    },
    {
      title: "时长",
      dataIndex: "duration",
      key: "duration",
    },
    {
      title: "最大人数",
      dataIndex: "max",
      key: "max",
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      // ellipsis: true,  // 超过宽度自动隐藏
      render: (type) => {
        // return (<span>{type ? type.slice(0, 10) : ""}</span>)
        return (
          <Tooltip title={type} color="lime">
            <span>{type ? type.slice(0, 10) : ""}</span>
          </Tooltip>
        )
      }
    },
    {
      title: "价格",
      dataIndex: "price",
      key: "price"
    },
    {
      title: "剧本人员",
      dataIndex: "composition",
      key: "composition"
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      render: (text, record) => {
        return (
          <Space>
            <Button type="primary">编辑</Button>
            <Button type="primary" danger onClick={() => remove(record)}>删除</Button>

          </Space>
        )
      }
    }
  ]

  useEffect(() => {
    getData()
  }, [getData])


  // 查询筛选
  let Filter = (values) => {
    console.log(values);
    setParams({
      ...params,
      page: 1,
      ...values
    })
  }
  return (
    <div>
      <Space direction="vertical" style={{ display: "flex" }}>
        <Card>
          <Form layout="inline" onFinish={Filter}>
            <Form.Item name="title">
              <Input placeholder="请输入标题查询"></Input>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">查询</Button>
            </Form.Item>
          </Form>
        </Card>
        <Table loading={loading} rowKey="_id" dataSource={scripts} columns={columns} pagination={
          {
            total,
            current: params.page,
            pageSize: params.limit,
            onChange: (page, pageSize) => {
              // console.log(page, pageSize);
              setParams({
                ...params,
                page,
                limit: pageSize,
              })
            }
          }
        }></Table>

      </Space>

    </div>
  );
}

export default ScriptsList;